<template>
	<div class="course_chapter_wrapper" v-loading="loading">
		<div class="chapter">
			<el-button class="add" type="text" icon="el-icon-added-chapter" @click="handleAddedChapter()">新增章</el-button>
			<h2>章节列表</h2>
			<chapter-tree ref="tree" :course-id="courseId" @handle="handleTreeOperate"></chapter-tree>
		</div>
		<div class="resource">
			<template v-if="videoListData.length > 0">
				<chapter-resource v-for="(item, index) in videoListData" :key="index" :data="item" />
			</template>
			<template v-else>
				<el-button class="add" icon="el-icon-added-resource" :disabled="!chapterNodeId" @click="handleOpenDialog()">添加资源</el-button>
			</template>
		</div>
		<chapter-form v-model="formDialog" :data-id="dataId" :is-sub="isSub" :type="addedType" @refresh="handleRefreshChapter"></chapter-form>
		<resource-upload v-model="videoDialog" :data-id="videoId" :chapter-id="chapterNodeId" @refresh="handleRefreshVideo"></resource-upload>
	</div>
</template>

<script>
import chapterForm from './form';
import chapterTree from './tree';
import resourceUpload from './upload';
import chapterResource from './resource';
import { getKnowledgeList } from '@/api/course/sysKnowledge';
export default {
	beforeRouteEnter(to, from, next) {
		to.meta['hasBack'] = true;
		next();
	},
	components: { chapterTree, chapterForm, chapterResource, resourceUpload },
	data() {
		return {
			dataId: '',
			isSub: false,
			addedType: '',
			formDialog: false,
			//视频
			videoDialog: false,
			videoListData: [],
			chapterNodeId: '',
			loading: false,
			videoId: ''
		};
	},
	computed: {
		courseId() {
			return this.$route.params.id;
		},
		knowledgeParams() {
			let params = { page: 1, limit: 1 };
			params['courseId'] = this.courseId;
			params['chapterId'] = this.chapterNodeId;
			return params;
		}
	},
	methods: {
		//新增节点
		handleAddedChapter() {
			this.dataId = '';
			this.isSub = false;
			this.addedType = '1';
			this.formDialog = true;
		},

		//选中节点
		handleTreeOperate(type, data) {
			if (type === 'edit') {
				this.isSub = false;
				this.addedType = '';
				this.dataId = data.id;
				this.formDialog = true;
			} else if (type === 'node') {
				this.isSub = true;
				this.addedType = '2';
				this.dataId = data.id;
				this.formDialog = true;
			} else if (type === 'checked') {
				this.chapterNodeId = data.id;
				this.handleRefreshVideo();
			}
		},

		//刷新章节数据
		handleRefreshChapter() {
			this.$refs['tree'].getChapterNodes();
		},

		//刷新视频数据
		handleRefreshVideo() {
			this.loading = true;
			this.getKnowledgeList();
		},

		//上传视频
		handleOpenDialog(data) {
			this.videoDialog = true;
			this.videoId = !data ? '' : data.id;
		},

		//获取视频列表
		async getKnowledgeList(chapterId) {
			let params = { ...this.knowledgeParams };
			let result = await getKnowledgeList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.videoListData = result.data || [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.course_chapter_wrapper::v-deep {
	display: flex;
	flex: 1;
	.chapter {
		width: 60%;
		flex-shrink: 0;
		min-width: 240px;
		border-right: 1px solid #e4e7ed;
		.el-button.add {
			float: right;
			margin-right: 12px;
		}
		h2 {
			height: 41px;
			padding: 12px;
			font-size: 15px;
			line-height: 16px;
			box-sizing: border-box;
			border-bottom: 1px solid #e4e7ed;
		}
	}
	.resource {
		flex: 1;
		padding: 16px;
		overflow: hidden;
		.el-button.add {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			padding: 56.25% 0 0;
			position: relative;
			color: #909399;
			width: 100%;
			span {
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				margin-left: 0;
				font-size: 16px;
				margin-top: 20px;
			}
			i.el-icon-added-resource {
				position: absolute;
				bottom: 50%;
				left: 50%;
				font-size: 48px;
				transform: translateX(-50%);
			}
		}
	}
}
</style>
